<template>
	<div class="all">
		<div class="header">公司自营网络平台披露信息材料</div>
		<van-collapse v-model="activeNames">
			<!-- <div  v-for="(item,index) in text">
				  <van-collapse-item :name="index" class="my-text">
				    <template #title>
				      <div><span class="xu">(一)</span><span class="my-title">{{item.val}}</span></div>
				    </template>
				    <div class="my-detail">{{item.tit}}</div>
				  </van-collapse-item>
			</div> -->
			<van-collapse-item name="1" class="my-text">
			  <template #title>
			    <div class="title"><span class="xu">(一)</span><span class="my-title">公司设有省级分支机构和落地服务机构的省（自治区、直辖市、计划单列市）清单。</span></div>
			  </template>
			  <div class="my-detail">公司先后在北京市、深圳市、黑龙江省、山西省、上海市、江苏省、湖南省、河南省、福建省、贵州省、浙江省、江西省、安徽省、甘肃省、云南省、山东省、广东省、厦门市、宁波市、河北省、内蒙古自治区、四川省、海南省、重庆市、广西壮族自治区、陕西省、新疆维吾尔自治区、天津市、湖北省、辽宁省、吉林省、青岛市、大连市、青海省、宁夏回族自治区、西藏自治区设立了36家分公司，已经实现全国大陆地区省级机构全覆盖。</div>
			</van-collapse-item>
			<van-collapse-item name="2" class="my-text">
			  <template #title>
			    <div class="title"><span class="xu">(二)</span><span class="my-title">互联网保险产品及保单的查询和验真途径：</span></div>
			  </template>
			  <div class="my-detail">
					<div class="text-spacing"><span>1.公司官方网站</span><a @click='clickBtn("https://www.chinalife-p.com.cn")'>www.chinalife-p.com.cn >></a><span>承保理赔自助查询</span> </div>
					<div>2.微信公众号“中国人寿财险”>>空中服务>>查保单</div>
				</div>
			</van-collapse-item>
			<van-collapse-item name="3" class="my-text">
			  <template #title>
			    <div class="title"><span class="xu">(三)</span><span class="my-title">理赔、保全等客户服务及投诉渠道，相关联系方式：</span></div>
			  </template>
			  <div class="my-detail">
					<div class="text-spacing"><span>1.可拨打中国人寿财产保险股份有限公司客户服务专线</span><a href="tel://95519" class="col">95519</a><span>和</span><a href="tel://4008695519" class="col">4008695519</a>。</div>
					<div> 2.中国人寿财产保险股份有限公司各级机构窗口服务网点亦均可受理服务及投诉事宜。</div>
				</div>
			</van-collapse-item>
			<van-collapse-item name="4" class="my-text">
			  <template #title>
			    <div class="title"><span class="xu">(四)</span><span class="my-title">保险产品承保公司全国统一的客户服务及投诉方式，包括客服电话、在线服务访问方式、理赔争议处理机制和工作流程等：</span></div>
			  </template>
			  <div class="my-detail">
					<div class="text-spacing"><span>服务监督电话：</span><a class="col" href='tel://95519'>95519</a><span>/</span><a href='tel://4008695519' class="col">4008695519</a>  </div>
					<div class="text-spacing"><span>自主查询网址：</span><a  @click='clickBtn("https://www.chinalife-p.com.cn")'>www.chinalife-p.com.cn</a> </div>
					<div class="text-spacing"><span>微信服务平台：</span><a>chinalife-pfw</a> </div>
					<div class="text-spacing"><div>总公司服务监督信箱：</div><a>service@chinalife-p.com.cn</a> </div>
					<div class="text-spacing">理赔争议处理机制及工作流程：</div>
					<div class="text-spacing"><span> 1、拨打</span><a class="col" href='tel://4008695519'>4008695519</a><span>或</span><a href='tel://95519' class="col">95519</a><span>/使用“一路行”自主理赔助手进行报案。（全国统一报案电话，7X24小时服务）</span> </div>
					<div class="text-spacing"> 2、施救及配合现场查勘</div>
					<div class="text-spacing"> 3、准备索赔材料</div>
					<div class="text-spacing"> 4、提交索赔材料</div>
					<div class="text-spacing"> 5、领取赔款</div>
					<div>
						<div> *理赔材料可登陆我公司官网进入“客户服务”-“理赔服务”-“理赔材料”进行查询或直接访问以下网址</div>
						<div><a  @click='clickBtn("https://www.chinalife-p.com.cn/chinalifeproperty/khfw/lpfw/lpxz/index.html")'>http://www.chinalife-p.com.cn/</a> </div>
						<div><a>chinalifeproperty/khfw/lpfw/lpxz/index.html</a> </div>
					</div>					
				</div>
			</van-collapse-item>
			<van-collapse-item name="5" class="my-text">
			  <template #title>
			    <div class="title"><span class="xu">(五)</span><span class="my-title">投保咨询方式、保单查询方式：</span></div>
			  </template>
			  <div class="my-detail">
					<div class="text-spacing">线下网点、电话咨询及线上门户网站均可实现投保咨询、保单查询功能。</div>
					<div class="text-spacing">
						<div>线下网点查询方式：</div>
						<div><a @click='clickBtn("https://www.chinalife-p.com.cn/chinalifeproperty/khfw/wdcx/index.html")'>http://www.chinalife-p.com.cn/</a></div>
						<div><a>chinalifeproperty/khfw/wdcx/index.html</a></div>												
					</div>
					<div class="text-spacing"><span>电话咨询方式：</span><a href='tel://4008695519' class="col">4008695519</a><span>/</span><a href='tel://95519' class="col">95519</a> </div>
					<div><span>线上门户查询方式：</span><a @click='clickBtn("https://www.chinalife-p.com.cn")'>www.chinalife-p.com.cn</a> </div>
        </div>
			</van-collapse-item>
			<van-collapse-item name="6" class="my-text">
			  <template #title>
			    <div class="title"><span class="xu">(六)</span><span class="my-title">针对消费者个人信息、投保交易信息和交易安全的保障措施：</span></div>
			  </template>
			  <div class="my-detail">严格按照行业监管要求进行客户信息保密工作，一方面自建承保系统提供客户个人信息、投保交易信息和交易安全的保障。系统符合国家及行业认证等级的要求。另一方面，严格规范人员销售行为，制定准则，保障客户信息安全。</div>
			</van-collapse-item>
			<van-collapse-item name="7" class="my-text">
			  <template #title>
			    <div class="title"><span class="xu">(七)</span><span class="my-title">自营网络平台在中国保险行业协会官方网站上的信息披露访问链接：</span></div>
			  </template>
			  <div class="my-detail">
					<div>
						<a @click='clickBtn("https://icid.iachina.cn/?columnid_url=201509301401")'>http://icid.iachina.cn/?</a>
						<a>columnid_url=201509301401</a>
					</div>
				</div>
			</van-collapse-item>
		</van-collapse>
		<div class="bottom" v-show="close">
			<span  @click="fun()" class="botton_left">×</span>
			<span class="botton_right">网页链接请复制后，前往浏览器粘贴查看</span>
		</div>
	</div>
</template>

<script lang="ts">
import 'vant/lib/collapse/style';
import 'vant/lib/collapse-item/style';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Collapse, CollapseItem } from 'vant';
@Component({
  components: {
		[Collapse.name]: Collapse,
		 [CollapseItem.name]: CollapseItem, },
})
export default class MainPage extends Vue {
			close: any=true;
			activeNames:any=[1]
			text:any=[
				{val:"我是第一",tit:'我是第一条信息的内容'},
				{val:"我是第二",tit:'我是第二条信息的内容'},
				{val:"我是第三",tit:'我是第三条信息的内容'},
				{val:"我是第四",tit:'我是第四条信息的内容'},
			]
			clickBtn(obj:any){
				// window.location.href=obj
			}
			fun(){
				this.close=false
			}
}
</script>
<style scoped>
	.all{
		background-color: white;
		position: relative;
	}
	a{
		font-weight: 600;
		color:#ccc;
		/* color: #3C76FF;
		text-decoration: underline; */
	}
	.col{
		font-weight: 600;
		color:#ccc;
		/* color: #3C76FF; */
		text-decoration:none;
	}
	 .text-spacing{
		 margin-bottom: 8px;
	 }
	.header{
		text-align: center;
		padding: 29px 0 10px 0;
		color: #2B2B2B;
		font-size: 16px;
		font-weight: 600;
	}
	.my-text{
		padding: 10px 0px;
		border-bottom: 1px solid #EEEEEE;
		text-align: left;
	}
	.my-text:focus{
		background-color: white;
	}
	.title{
		display: flex; 
	}
	.xu{
		color: #22A088;
		font-weight: 600;
		width: 48px;
		flex-grow:0;
		flex-shrink:0;
		/* display: inline-block; */
		text-align: center;
		font-size: 16px;
	}
	.my-title{
		color: #2B2B2B;
		font-size: 16px;
		font-weight: 600;
	}
	.my-detail{
		color: #666666;
		font-weight: 400;
		font-size: 14px;
	}
	/deep/.van-cell::after{
		display: none !important; 
	}
	/deep/.van-collapse-item--border::after{
		display: none !important;
	}
	/deep/[class*=van-hairline]::after {
		display: none !important;
	}
	/deep/.van-collapse-item__content {
		padding: 0px 41px 10px 41px;
	}
	.bottom{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 50px;
		background-color: rgba(0, 0, 0, .5);
		display: flex;
		justify-content: space-between;
		color: #fff;
		font-size: 16px;
		justify-items: center;
		align-items: center;
	}
	.botton_left{
		padding: 0 0 0 15px;
	}
	.botton_right{
		padding: 0 35px 0 0;
	}

</style>
